<template>
	<div class="gedan">
		<div style="margin-bottom: 15px;">
    		<el-button-group>
    			<el-button v-for="item in songtype" :key="item" icon="el-icon-service" @click="choose(item)">{{item}}</el-button>
    		</el-button-group>
    	</div>
        <el-row :gutter="12">
		  <el-col :xs="24" :sm="8" :md="6" :lg="6" v-for="item in gedanList" :key="item.id">
		    <el-card shadow="hover" :body-style="{ padding: '8px' }">
		      <div class="overly">
		      	<img v-lazy='item.coverImgUrl' :alt=item.name width="100%">
		      	<el-row class="fix" type="flex" justify="space-between">
		      		<el-col :span='21'><i class="el-icon-service"></i><span>{{item.playCount | wan}}</span></el-col>
		      		<el-col :span='3'><i @click = "song(item.id)" class="iconfont icon-bofang songSheet"></i></el-col>
		      	</el-row>
		      </div>
		      <p class="listtit"><i class="el-icon-service"></i>{{item.name}}</p>
		      <p><i>by</i> {{item.creator.nickname}}</p>
		    </el-card>
		  </el-col>
	    </el-row>
		<CurrentMusic ref="songdan" :percent="curpercent"></CurrentMusic>
	</div>
</template>
<script type="text/javascript">
    import CurrentMusic from "./CurrentMusic.vue"

	export default{
		data(){
			return {
				songtype:["粤语","华语","英语","韩语","日语","小语种"],
				gedanList:[],
				curPlayIndex:0,
				curpercent:0,
			}
		},
		components:{
			CurrentMusic,
		},
		mounted(){
			this.$http.get("/cloudmusic/?type=search&search_type=1000&s=粤语").then((res)=>{
				this.gedanList = res.data.result.playlists;
			})
		},
		filters:{
			wan(val){
				let str = val.toString();
				if (str.length > 4) {
					return str.substring(0,str.length-4) + "万";
				}
			}
		},
		computed:{
			
		},
		methods:{
			// 选择歌单的种类
			choose(songtype){
				this.$http.get("/cloudmusic/?type=search&search_type=1000&s="+songtype).then((res)=>{
					this.gedanList = res.data.result.playlists;
					console.log(res.data.result.playlists);
				})
			},
			song(songid){
				// 调用子组件方法 songSheet()
				this.$refs.songdan.songSheet(songid);
			}
			
			
			
			

		}
	};
</script>

<style type="text/css" scoped lang="scss">
	p{
		margin-bottom: 0;
		font-size: 12px;
		color: green;
		display: inline-block;   
		white-space: nowrap;
		width: 180px;
		overflow: hidden;   
		text-overflow:ellipsis;
	}
	button{
		outline: none;
		&:focus{
			border-color:#c6e2ff;
		}
	}
	.el-row .el-col:nth-child(16) .el-card .el-card__body img{
		padding-bottom: 1px;
	}
	p.listtit{
		color: #454545;
		width: 180px;
		margin-top: 6px;
		font-size: 13px;
	}
	.overly{
		position: relative;
	}
	.fix{
		position: absolute;
		bottom: 0;
		width:100%;
		background: rgba(0,0,0,.5);
		color: #ddd;
		padding:3px 1px;
		span{
			font-size: 13px;
		}
	}
	i.songSheet{
		cursor: pointer;
		padding:3px;
	}
	i.songSheet:hover{
		color: #fff;

	}
	
</style>